<template>
  <div class="inventory-container">
    <h1>商品库存管理</h1>

    <table>
      <thead>
      <tr>
        <th>商品名称</th>
        <th>商品描述</th>
        <th>价格</th>
        <th>库存</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in goodsList" :key="item.goodsId">
        <td>{{ item.name }}</td>
        <td>{{ item.description }}</td>
        <td>{{ item.price }}</td>
        <td>
          <!-- 下架商品时库存不可编辑 -->
          <input
              type="number"
              v-model.number="item.stock"
              :disabled="item.stock === 0 && !item.isRestored"
              :placeholder="item.stock === 0 && !item.isRestored ? '已下架' : ''"
          />
        </td>
        <td>
          <button
              @click="confirmStockUpdate(item.goodsId)"
              :disabled="item.stock === 0 && !item.isRestored"
              class="update-btn"
          >
            确定修改库存
          </button>
          <button
              @click="toggleItemStatus(item.goodsId)"
              class="deactivate-btn"
          >
            {{ item.stock === 0 ? '恢复商品' : '下架商品' }}
          </button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      goodsList: [], // 商品列表
    };
  },
  methods: {
    // 获取商品列表
    fetchGoodsList() {
      axios
          .get('http://localhost:8080/good/list')
          .then((response) => {
            this.goodsList = response.data;
          })
          .catch((error) => {
            console.error('Error fetching goods list:', error);
          });
    },

    // 更新库存
    confirmStockUpdate(goodsId) {
      const item = this.goodsList.find((item) => item.goodsId === goodsId);
      const newStock = item.stock;

      if (newStock !== undefined && newStock >= 0) {
        const formData = new FormData();
        formData.append('goodName', item.name);
        formData.append('price', item.price);
        formData.append('stock', newStock);
        formData.append('description', item.description);
        formData.append('image', null); // 不包含图片时传递 null

        axios
            .put(`http://localhost:8080/good/update/${goodsId}`, formData)
            .then((response) => {
              console.log('库存更新成功', response.data);
              alert('库存更新成功');
              this.fetchGoodsList(); // 更新商品列表
            })
            .catch((error) => {
              console.error('更新库存失败', error);
              alert('库存更新失败');
            });
      }
    },
    toggleItemStatus(goodsId) {
      const item = this.goodsList.find((item) => item.goodsId === goodsId);

      // 下架商品，将库存设置为0，并禁用输入框
      if (item.stock !== 0) {
        item.stock = 0; // 设置库存为 0
        item.isRestored = false; // 标记为下架
        alert('商品已下架，库存已设置为 0。'); // 下架时弹出提示
      } else {
        item.isRestored = true; // 恢复商品时，设置为可编辑
        item.stock = item.previousStock || 1; // 恢复之前的库存，假设 default 恢复为 1
        alert('商品已恢复'); // 恢复时弹出提示
      }

      const formData = new FormData();
      formData.append('goodName', item.name);
      formData.append('price', item.price);
      formData.append('stock', item.stock); // 更新库存
      formData.append('description', item.description);
      formData.append('image', null); // 不包含图片时传递 null

      axios
          .put(`http://localhost:8080/good/update/${goodsId}`, formData)
          .then(() => {
            // 重新加载商品列表，刷新页面状态
            this.fetchGoodsList();
          })
          .catch((error) => {
            console.error('商品操作失败', error);
            alert('商品操作失败，请重试。'); // 商品操作失败时的提示
          });
    },
    // // 下架商品/恢复商品
    // toggleItemStatus(goodsId) {
    //   const item = this.goodsList.find((item) => item.goodsId === goodsId);
    //
    //   // 下架商品，将库存设置为0，并禁用输入框
    //   if (item.stock !== 0) {
    //     item.stock = 0; // 设置库存为 0
    //     item.isRestored = false; // 标记为下架
    //   } else {
    //     item.isRestored = true; // 恢复商品时，设置为可编辑
    //   }
    //
    //   const formData = new FormData();
    //   formData.append('goodName', item.name);
    //   formData.append('price', item.price);
    //   formData.append('stock', item.stock); // 下架时库存为0
    //   formData.append('description', item.description);
    //   formData.append('image', null); // 不包含图片时传递 null
    //
    //   axios
    //       .put(`http://localhost:8080/good/update/${goodsId}`, formData)
    //       .then(() => {
    //         // 重新加载商品列表，刷新页面状态
    //         this.fetchGoodsList();
    //       })
    //       .catch((error) => {
    //         console.error('商品操作失败', error);
    //       });
    // },
  },
  mounted() {
    this.fetchGoodsList(); // 页面加载时获取商品列表
  },
};
</script>

<style scoped>
.inventory-container {
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table,
th,
td {
  border: 1px solid #ddd;
}

th,
td {
  padding: 12px;
  text-align: center;
}

td input[type='number'] {
  width: 80px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

td input:disabled {
  background-color: #f1f1f1;
  cursor: not-allowed;
}

button {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:disabled {
  background-color: #d3d3d3;
  color: #999;
  cursor: not-allowed;
}

.update-btn {
  background-color: #4CAF50; /* 绿色按钮 */
  color: white;
  border: 1px solid #4CAF50; /* 增加边框，增强按钮轮廓 */
}

.update-btn:hover {
  background-color: #45a049; /* 更深的绿色 */
  box-shadow: 0 6px 10px rgba(72, 189, 98, 0.3); /* 鼠标悬停时轻微阴影效果 */
}

.deactivate-btn {
  background-color: #ff9800; /* 柔和的橙色替代红色 */
  color: white;
  border: 1px solid #ff9800; /* 增加边框 */
}

.deactivate-btn:hover {
  background-color: #fb8c00; /* 深橙色 */
  box-shadow: 0 6px 10px rgba(255, 152, 0, 0.3); /* 鼠标悬停时阴影效果 */
}

@media (max-width: 768px) {
  table {
    font-size: 12px;
  }

  td input[type='number'] {
    width: 60px;
  }

  button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

</style>
